<script>
import numberBox from "@/components/number-box.vue";
import { getShopGoods, postShopCart } from "@/config/api";

export default {
  components: {
    numberBox,
  },
  props: {
    id: String,
  },
  data() {
    return {
      pageLoaded: false,
      loading: 2, // 0:不再加载; 1:加载中; 2:加载完成;
      info: {},
      showAttr: false,
      specsKeys: [
        {
          type: "color",
          name: "颜色",
          active: {},
        },
        {
          type: "size",
          name: "尺寸",
          active: {},
        },
      ],
      number: 1,
    };
  },
  computed: {
    specs() {
      let specsTxt = "";
      let specsKeys = this.specsKeys.filter((specsKey) => {
        return !!specsKey.active.name;
      });
      specsKeys.forEach((specsKey, index) => {
        if (index !== specsKeys.length - 1) {
          specsTxt += specsKey.active.name + "，";
        } else {
          specsTxt += specsKey.active.name;
        }
      });
      return specsTxt;
    },
  },
  onLoad() {
    this.loadDetail().then(() => {
      this.pageLoaded = true;
    });
  },
  methods: {
    loadDetail() {
      return getShopGoods({ _id: this.id }).then(({ code, data: info }) => {
        if (code !== 200) {
          info = {};
        }
        info.toShowPrice = Number(`${info.price}e-2`).toFixed(2);
        info.toShowImgAbbrev = this.img_api + info.imgAbbrev;
        this.info = info;
        for (const specsKey of this.specsKeys) {
          specsKey.active =
            info.goodsSpecs && info.goodsSpecs[specsKey.type]
              ? info.goodsSpecs[specsKey.type][0]
              : {};
        }
        this.loading = 0;
      });
    },
    chooseSpecs(specs, item) {
      specs.active = item;
    },
    goodsInfo() {
      return {
        storeId: this.info.storeId, // 店铺id
        storeName: this.info.shopStore?.name || "", // 店铺名称
        goodsId: this.id, // 商品id
        goodsNum: this.number, // 商品数量
        name: this.info.name, // 商品名称
        imgAbbrev: this.info.imgAbbrev, // 商品缩略图
        price: this.info.price, // 商品价格
        type: this.specs, // 规格
      };
    },
    inCart() {
      return postShopCart(this.goodsInfo()).then(({ code }) => {
        if (code === 200) {
          uni.showToast({ title: "加入成功", icon: "success" });
          this.closePopup();
        }
      });
    },
    buyNow() {
      this.$store.commit("setSettlementGoods", [this.goodsInfo()]);
      console.log(this.$store.state.settlementGoods);
      this.toURL("/page_mall/settle/index", {}, { isAuth: true });
    },
    openPopup() {
      this.showAttr = true;
    },
    closePopup() {
      this.showAttr = false;
    },
  },
};
</script>

<template>
  <view class="container" v-show="pageLoaded">
    <swiper class="detail-banner-swiper">
      <swiper-item v-for="img of info.imgDetails" :key="img.attaId">
        <view class="banner-item">
          <u-image
            width="100%"
            height="750rpx"
            :src="img_api + img.url"
            mode="aspectFill"
          ></u-image>
        </view>
      </swiper-item>
    </swiper>
    <view class="detail-head">
      <view class="detail-title">{{ info.name }}</view>
      <view class="detail-price">¥{{ info.toShowPrice }}</view>
    </view>
    <view class="detail-attrs">
      <view class="detail-attr" @click="openPopup">
        <view class="detail-attr_name">选择</view>
        <view class="detail-attr_content">
          {{ specs + (specs ? "，" : "") + number + "件" }}
        </view>
        <view class="detail-attr_btn">
          <u-image
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-go.png"
            mode="aspectFill"
            width="32rpx"
            height="32rpx"
          ></u-image>
        </view>
      </view>
      <view class="detail-attr">
        <view class="detail-attr_name">服务</view>
        <view class="detail-attr_content">
          支持快递（邮费0-22元） · 支持自提
        </view>
      </view>
    </view>
    <view class="detail-wrap_title">
      <text class="detail-wrap_title-text">商品详情</text>
    </view>
    <view class="detail-content">
      <u-parse :content="info.goodsDesc" :tagStyle="parseStyle"></u-parse>
    </view>
    <view class="detail-footer">
      <view
        class="detail-footer-item"
        @click="toURL('/page_mall/cart/index', {}, { isAuth: true })"
      >
        <view class="detail-footer-img">
          <u-image
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-cart.png"
            mode="aspectFill"
            width="40rpx"
            height="40rpx"
          ></u-image>
        </view>
        <view>购物车</view>
      </view>
      <view class="detail-footer-btns">
        <view class="detail-footer-btn1" @click="openPopup">加入购物车</view>
        <view class="detail-footer-btn2" @click="buyNow">立即购买</view>
      </view>
    </view>
    <u-popup :show="showAttr" round="40rpx" type="bottom" overlayOpacity="0.7">
      <view class="popup-content" @touchmove.prevent.stop="() => {}">
        <view class="popup-close">
          <u-image
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-close.png"
            width="48rpx"
            height="48rpx"
            @click="closePopup"
          ></u-image>
        </view>
        <view class="popup-head">
          <view class="popup-head-img">
            <u-image
              :src="info.toShowImgAbbrev"
              mode="aspectFill"
              width="96rpx"
              height="96rpx"
              radius="16rpx"
            ></u-image>
          </view>
          <view class="popup-head-price">¥{{ info.toShowPrice }}</view>
        </view>
        <scroll-view
          class="attr-details"
          :scroll-y="true"
          :enhanced="true"
          :show-scrollbar="false"
        >
          <template v-for="specs of specsKeys">
            <view
              class="attr-detail"
              :key="specs.type"
              v-if="
                info.goodsSpecs[specs.type] &&
                info.goodsSpecs[specs.type].length > 0
              "
            >
              <view class="attr-detail-title">{{ specs.name }}</view>
              <view class="attr-detail-list">
                <view
                  class="attr-detail-item"
                  v-for="item of info.goodsSpecs[specs.type]"
                  :key="item.id"
                  :class="{ active: item.id === specs.active.id }"
                  @click="chooseSpecs(specs, item)"
                >
                  <view class="attr-detail-item-content">{{ item.name }}</view>
                </view>
              </view>
            </view>
          </template>
          <view class="attr-detail row">
            <view class="attr-detail-title">数量</view>
            <number-box
              class="attr-detail-number-box"
              v-model="number"
            ></number-box>
          </view>
        </scroll-view>
        <view class="attr-footer">
          <view class="attr-footer-btns">
            <view class="attr-footer-btn1" @click="inCart">加入购物车</view>
            <view class="attr-footer-btn2" @click="buyNow">立即购买</view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<style lang="scss" scoped>
.container {
  padding-bottom: env(safe-area-inset-bottom);
}

swiper.detail-banner-swiper {
  height: 750rpx;

  &::v-deep {
    .wx-swiper-dots {
      background: rgba(255, 255, 255, 0.4);
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      bottom: 24rpx;
    }

    .wx-swiper-dot {
      width: 40rpx;
      height: 8rpx;
      margin: 0;
      background: transparent;
      border-radius: 8rpx;
      opacity: 1;

      &.wx-swiper-dot-active {
        background: #ffffff;
        opacity: 1;
      }
    }
  }
}

.banner-item {
  position: relative;

  &:after {
    content: "";
    display: block;
    width: 100%;
    height: 160rpx;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.16) 100%
    );
    position: absolute;
    bottom: 0;
  }
}

.detail-head {
  padding: 32rpx 32rpx 0;

  .detail-title {
    font-size: 32rpx;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    line-height: 44rpx;
    margin-bottom: 24rpx;
  }

  .detail-price {
    font-size: 48rpx;

    font-family: D-DIN-Bold;
    font-weight: 700;
    color: #ff5000;
    line-height: 52rpx;
  }
}

.detail-attrs {
  margin: 48rpx 0;
  border: solid rgba(0, 0, 0, 0.1);
  border-width: 2rpx 0;

  .detail-attr {
    display: flex;
    align-items: center;
    padding: 32rpx;

    .detail-attr_name {
      flex: none;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 44rpx;
      margin-right: 48rpx;
    }

    .detail-attr_content {
      flex: auto;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.9);
      line-height: 44rpx;
    }

    .detail-attr_btn {
      flex: none;
      width: 32rpx;
      height: 32rpx;
    }
  }
}

.detail-wrap_title {
  height: 72rpx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0 32rpx;
  display: flex;
  align-items: center;

  .detail-wrap_title-text {
    font-size: 32rpx;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    line-height: 48rpx;
  }
}

.detail-content {
  padding: 26rpx 32rpx (26rpx + 124rpx);
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.7);
  text-align: justify;
  line-height: 1.5;
}

.detail-footer {
  background: #ffffff;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(124rpx + env(safe-area-inset-bottom));
  padding: 0 32rpx calc(8rpx + env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-between;
  align-items: center;

  .detail-footer-item {
    height: 80rpx;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
    line-height: 34rpx;
    min-width: 72rpx;
    margin-left: 40rpx;

    &:first-of-type {
      margin-left: 0;
    }

    .detail-footer-img {
      width: 40rpx;
      height: 40rpx;
      margin-top: 4rpx;
    }
  }

  .detail-footer-btns {
    display: flex;
    font-size: 28rpx;
    font-weight: 600;
    line-height: 40rpx;
    border-radius: 88rpx;
    overflow: hidden;
    margin-left: auto;

    .detail-footer-btn1,
    .detail-footer-btn2 {
      height: 80rpx;
      border-radius: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .detail-footer-btn1 {
      width: 240rpx;
      background: #fff201;
      color: rgba(0, 0, 0, 0.9);
      margin-right: 8rpx;
    }

    .detail-footer-btn2 {
      width: 320rpx;
      background: #ff5000;
      color: #ffffff;
    }
  }
}

.popup-content {
  max-height: 80vh;
  padding: 32rpx 32rpx 0;
  position: relative;

  .popup-close {
    position: absolute;
    right: 24rpx;
    top: 24rpx;
  }

  .popup-head {
    display: flex;
    align-items: flex-end;
    margin-bottom: 20rpx;

    .popup-head-img {
      margin-right: 24rpx;
    }

    .popup-head-price {
      font-size: 48rpx;
      font-family: D-DIN-Bold;
      font-weight: 700;
      color: #ff5000;
      line-height: 52rpx;
    }
  }

  .attr-details {
    max-height: calc(80vh - 148rpx - 124rpx);

    .attr-detail {
      display: flex;
      flex-flow: column nowrap;

      &:last-of-type {
        margin-bottom: 68rpx;
      }

      &.row {
        flex-flow: row nowrap;
      }

      .attr-detail-title {
        font-size: 32rpx;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.9);
        line-height: 44rpx;
        margin-top: 28rpx;
      }

      .attr-detail-number-box {
        margin-top: 28rpx;
        margin-left: auto;
      }

      .attr-detail-list {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.7);
        line-height: 40rpx;
        display: flex;
        flex-flow: row wrap;
        margin: 0 -8rpx 20rpx;

        .attr-detail-item {
          flex: 0 0 33.33333%;

          .attr-detail-item-content {
            height: 64rpx;
            background: #f9f4f2;
            border-radius: 8rpx;
            margin: 16rpx 8rpx 0;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          &.active {
            .attr-detail-item-content {
              background: #ff5000;
              color: #fff201;
            }
          }
        }
      }
    }
  }

  .attr-footer {
    height: 124rpx;
    padding-bottom: 8rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .attr-footer-btns {
      flex: auto;
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      font-weight: 600;
      line-height: 40rpx;
      border-radius: 88rpx;
      overflow: hidden;

      .attr-footer-btn1,
      .attr-footer-btn2 {
        height: 80rpx;
        border-radius: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .attr-footer-btn1 {
        flex: auto;
        background: #fff201;
        color: rgba(0, 0, 0, 0.9);
        margin-right: 8rpx;
      }

      .attr-footer-btn2 {
        width: 400rpx;
        background: #ff5000;
        color: #ffffff;
      }
    }
  }
}
</style>
